<template>
  <div class="table-page-search-wrapper">
    <a-form layout="inline">
      <a-row :gutter="48">
        <a-col :md="8" :sm="24">
          <a-form-item label="申请人">
            <a-input
              v-model="formData.username"
              placeholder="请输入"
            />
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="部门名称">
            <a-select
              v-model="formData.depname"
              placeholder="请选择">
              <a-select-option
                v-for="(item) in departments"
                :key="item.id"
                :value="item.name">
                <span
                  style="display: inline-block;width: 100%"
                  :title=" item.name">
                  {{ item.name }}
                </span>
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="请假类型">
            <a-select
              v-model="formData.leaveType"
              placeholder="请选择">
              <a-select-option
                v-for="item in leaveTypes"
                :key="item.item_val"
                :value="item.item_desc">
                 <span
                   style="display: inline-block;width: 100%"
                   :title=" item.item_desc">
                    {{ item.item_desc }}
                 </span>
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        </a-row>
      <a-row :gutter="48">
        <a-col :md="8" :sm="24">
          <a-form-item label="时   间" class="label-pre">
            <a-range-picker v-model="time" valueFormat="YYYYMMDD" style="width: 100%">
              <template slot="renderExtraFooter">
                <span
                  style="cursor: pointer;display:inline-block;margin-right:10px;"
                  @click="timeRangeChange(7)"
                >最近一周</span>
                <span
                  style="cursor: pointer;display:inline-block;margin-right:10px;"
                  @click="timeRangeChange(30)"
                >最近一个月</span>
                <span
                  style="cursor: pointer;display:inline-block;margin-right:10px;"
                  @click="timeRangeChange(90)"
                >最近三个月</span>
              </template>
            </a-range-picker>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24" class="">
          <span class="table-edit-submitButtons">
            <a-button class="ml8" type="primary" @click="queryStatistics">查询</a-button>
            <a-button class="ml8" type="primary" v-action:export @click="exportExcel">导出</a-button>
            <a-button class="ml8" @click="handelReset">重置</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
import moment from 'moment'

export default {
  name: 'StatisticsSelect',
  data () {
    return {
      formData: {},
      time: [],
      timeRange: null,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    }
  },
  computed: {
    leaveTypes () {
      return this.$store.getters.leaveTypes
    },
    departments () {
      return this.$store.getters.departments
    }
  },
  methods: {
    timeRangeChange (days) {
      this.time = this.recentTime(days)
    },
    recentTime (days) {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * days)
      return [moment(start), moment(end)]
    },
    formatTime (callback) {
      if (this.time && this.time.length) {
        this.formData.startTime = this.time[0].format('YYYY-MM-DD') + ' 00:00:00'
        this.formData.endTime = this.time[1].format('YYYY-MM-DD') + ' 23:59:59'
      } else {
        delete this.formData.startTime
        delete this.formData.endTime
      }
    },
    queryStatistics () {
      this.formatTime()
      this.$emit('queryStatistics', this.formData)
    },
    exportExcel () {
      this.formatTime()
      this.$emit('exportExcel', this.formData)
    },
    handelReset () {
      this.formData = {}
      this.time = []
      this.$emit('resetParams', {})
    }
  }
}
</script>
<style scoped>
.a-col-2 {
  margin-top: 5px;
}

.el-range-editor--small.a-input__inner {
  width: 100%;
}

</style>
